<template>
  <SearchBar @getSearch="fetSearchData"/>
  <div class="content">
    <!-- 表格渲染数据 -->
    <el-table :data="cates" show-header style="width: 100">
      <el-table-column prop="Number" label="订单编号" />
      <el-table-column prop="cateName" label="用户昵称" />
      <el-table-column prop="mobile" label="手机号码" />
      <el-table-column prop="price" label="订单金额" />
      <el-table-column prop="state" label="状态">
        <!-- 用三目判断数据是否是1，决定上下架 -->
        <template #default="{ row }">
          {{ row.state === 1 ? '待支付' : '已支付' }}
        </template>
      </el-table-column>
      <el-table-column prop="uploading" label="上传人" />
      <el-table-column prop="time" label="上传时间" />
      <el-table-column prop="couserId" label="操作">
        <template #default="{ row }">
            <span class="but1" @click="Compile()">查看</span>
            <span class="but3" @click="ClckDelet(row.id)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="foort">
      <el-pagination
      v-model:current-page="page"
      v-model:page-size="size"
      :page-sizes="[100, 200, 300, 400]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
    <!-- 编辑的弹出窗 -->
    <el-dialog v-model="dialogFormVisible" title="编辑">
      <compile/>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { fectCourse, deltcourse, grounDing, LowCourse} from '@/api';
import SearchBar from '@c/SearchBar.vue'
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import compile from "@c/compile.vue"
// 获取列表数据
const cates = ref([])
const getCourse = () => {
  fectCourse({
    ...searchParams
  })
  .then(res => {
    console.log(res);
    if (res.data.code === 200) {
      cates.value = res.data.data.lists
      total.value = res.data.data.total
    }
  })
}

// 筛选按钮
let searchParams = reactive({})
const fetSearchData = (params: any) => {
  searchParams = params
  getCourse()  
}

// 点击按钮进行跳转到添加课程页面
const router = useRouter()
const addcourse = () => {
  router.push('/addcourse')
}
// 编辑数据
const dialogFormVisible = ref<boolean>(false)
const Compile = () => {
  dialogFormVisible.value = true
}

// 点击上下架
const higHand = (id: number, state: number) => {
  // ==1 的时候代表点击的上架
  if (state === 1) {
    ElMessageBox.confirm('你确定要上架吗', {
    confirmButtonText: ('确认'),
    cancelButtonText: ('取消'), 
    type: 'warning'
  }).then(() => {
    grounDing({ id }).then(res => {
      if (res.data.code === 200)
      ElMessage({
        type:'success',
        message: '上架成功',
        duration: 1000,
        onClose: () => {
          router.go(0)
        }
      })
    })
  })
  } else {
    ElMessageBox.confirm('你确定要下架吗', {
    confirmButtonText: ('确认'),
    cancelButtonText: ('取消'), 
    type: 'warning'
  }).then(() => {
    LowCourse({ id }).then(res => {
      if (res.data.code === 200)
      ElMessage({
        type:'success',
        message: '下架成功',
        duration: 1000,
        onClose: () => {
          router.go(0)
        }
      })
    })
  })
  }
}

// 点击删除一条数据
const ClckDelet = ( id: number ) => {
  ElMessageBox.confirm('你确定要删除我吗', {
    confirmButtonText: ('确认'),
    cancelButtonText: ('取消'), 
    type: 'warning'
  }).then(() => {
    deltcourse({ id }).then(res => {
      if (res.data.code === 200)
      ElMessage({
        type:'success',
        message: '删除成功',
        duration: 1000,
        onClose: () => {
          router.go(0)
        }
      })
    })
  })
}

// 获取分页实例
let size = ref (15)
let page = ref(1)
const total = ref()
// 再次调用请求数据刷新页面,分页方法
const handleSizeChange = () => {
  getCourse()
}
const handleCurrentChange = () => {
  getCourse()
}


// 调用列表数据
onMounted(() => {
  getCourse()
})
</script>

<style scoped lang="scss">
.ctitle{
  // line-height: 80px;
  font-size: 14px;
  margin-bottom: 20px;
}
.content {
  margin-top: 20px;
  height: 550px;
  background-color: rgb(255, 255, 255);

  .addcourse {
    display: flex;
    height: 80px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid rgba(231, 175, 175, 0.5);

    h2 {
      font-size: 18px;
    }
  }
  span {
      display: inline-block;
      font-weight: bold;
      padding: 10px 5px;
      cursor: pointer;
    }
    .but2{
      color: red;
    }
    .but3{
      color: #38a28a;
    }
}
.foort{
  margin: 15px 25%;
  padding-bottom: 20px;
}
</style>